<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./../lib/consoleNoRequire.js"></script>
    <script src="./bower_components/zepto/zepto.js"></script>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--<script src="./bower_components/jquery/dist/jquery.js"></script>
    <script src="./bower_components/zepto/zepto-touch.js"></script>-->

    <style>
        #testArea{
            position: relative;
            top:0;
            left:0;
            height: 500px;
            width:300px;
            background: lightgreen;
            overflow: auto;
        }
        #inner{
            position: relative;
            top:0;
            left:0;
            height: 400px;
            width:600px;
            background: lightcyan;
        }
    </style>
</head>
<body>
    <div id="testArea">
        <div id="inner">
        </div>
    </div>
    <script>
        document.getElementById('testArea').addEventListener('click',function(){
            alert('click');
        },false);
        document.getElementById('testArea').addEventListener('dblclick',function(){
            alert('dblclick  11');
        },false);
        /*
        $(function(){
            *//*$(document).on('touchmove',function(e){
                e.preventDefault();
            });*//*
            $('#testArea').on('swipeLeft',function(){
                console.log('swipeleft');
            });

            $('#testArea').on('dblclick',function(){
                alert('dblclick');
            });

            $('#testArea').on('swipeRight',function(){
                console.log('swiperight');
            });
        });*/
    </script>
</body>
</html>